<template>
<div class="search-bar" v-if='config' >
    
    <i-row class='search-bar-content'>
        <i-col :sm='4' :xs='8' v-for='mod in config'  :key='mod.label' >
            <div class="item-content" >
                <i-select  @on-change="() =>{ change(mod.key, mod) }"  v-model='mod.current' :placeholder='mod.label'>
                    <i-option :value='item.value' v-for='(item, index) of mod.options' :key='index'>
                        {{item.label}}
                    </i-option>
                </i-select>
            </div>
        </i-col>
    </i-row>
   
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';

interface IOptions {
    label: string
    value: string
}

export interface ISearchBar{
    label:string
    current: string
    key: string
    optiosn: IOptions
}

@Component
export default class searchBar extends Vue{

 @Prop()
 config?: ISearchBar

 change(key:string, mod:any){
    let config:any = this.config;
    this.$emit('change', { value:mod.current ,key, mod, config})
 }
  
}


</script>

<style scoped lang='less'>

.search-bar{
    padding: 20*@rem;
    background: url('../../assets/block-bg.png') center no-repeat;
    background-size: 100% 100%;

}

.search-bar-content{
  .max-page-width();
}

.item-content{

    padding: 10*@rem;
    text-align: center;
}

</style>